<template>
  <el-dialog v-model="dialogVisible" title="宠物资料录入" width="60%">
    <div style="display: flex; justify-content: center; align-items: center">
      <el-form
        :model="form"
        :inline="true"
        label-width="120px"
        class="customClass"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="宠物名称" prop="petName">
          <el-input
            v-model="form.petName"
            placeholder="请输入宠物名称"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="宠物种类" prop="categoryName">
          <el-input
            v-model="form.categoryName"
            placeholder="请上传宠物图片进行识别"
            disabled
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="宠物年龄" prop="age">
          <el-input
            v-model="form.age"
            placeholder="请输入宠物年龄"
            style="width: 180px"
          />
        </el-form-item>
        <el-form-item label="宠物生日" prop="birthday">
          <el-date-picker
            style="width: 180px"
            v-model="form.birthday"
            type="date"
            placeholder="请选择宠物生日"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>

        <el-form-item label="健康状态" prop="health">
          <el-select
            v-model="form.health"
            placeholder="请选择宠物健康状态"
            style="width: 180px"
          >
            <el-option label="健康" value="0" />
            <el-option label="不健康" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="宠物性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="公" border />
            <el-radio label="母" border />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="流浪状态" prop="isStray">
          <el-select
            v-model="form.isStray"
            placeholder="是否流浪"
            style="width: 180px"
          >
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="疫苗接种" prop="vaccineStatus">
          <el-select
            v-model="form.vaccineStatus"
            placeholder="是否接种"
            style="width: 180px"
          >
            <el-option label="未接种" value="0" />
            <el-option label="已接种" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="宠物体型" prop="description">
          <el-select
            v-model="form.description"
            placeholder="请选择宠物体型"
            style="width: 180px"
          >
            <el-option label="小型" value="0" />
            <el-option label="中型" value="1" />
            <el-option label="大型" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="width: 20%">
        <FileUpload
          label="上传宠物图片"
          v-model:uid="uidName.petData"
          v-model:file="fileList.petFile"
          v-model:petCategoryName="form.categoryName"
          :smartCheck="1"
          :uploadType="1"
          ref="fileRef1"
        />
        <div style="height: 20px"></div>
        <FileUpload
          label="上传疫苗接种证书图片"
          v-model:uid="uidName.yimiaoData"
          v-model:file="fileList.yimiaoFile"
          :uploadType="1"
          ref="fileRef2"
        />
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(formRef)">
          确定
        </el-button>
        <el-button @click="resetForm(formRef)">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import FileUpload from "@/view/components/file-upload.vue";
import { addPetInfo } from "@/api/owner";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { uploadFile } from "@/api/file";
const uidName = reactive<any>({
  petData: [],
  yimiaoData: [],
});
const fileRef2 = ref();
const fileRef1 = ref();
const fileList = reactive<any>({
  petFile: {} as object,
  yimiaoFile: {} as object,
});
interface RuleForm {
  petName: string;
  age: number | string;
  birthday: string;
  sex: string;
  health: number | string;
  description: number | string;
  vaccineStatus: number | string;
  isStray: number | string;
  categoryName: number | string;
  petImage: string;
  vaccineImage: string;
}
const formRef = ref<FormInstance>();
const form = reactive<RuleForm>({
  petName: "",
  age: "",
  birthday: "",
  sex: "",
  health: "",
  description: "",
  isStray: "",
  vaccineStatus: "",
  categoryName: "",
  petImage: "",
  vaccineImage: "",
});

const rules = reactive<FormRules<RuleForm>>({
  petName: [{ required: true, message: "请输入宠物的名字", trigger: "blur" }],
  categoryName: [
    { required: true, message: "请输入宠物的名字", trigger: "blur" },
  ],
  age: [
    {
      required: true,
      message: "请输入宠物的年龄",
      trigger: "blur",
    },
  ],
  birthday: [
    {
      required: true,
      message: "请输入宠物的生日",
      trigger: "blur",
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择宠物的性别",
      trigger: "change",
    },
  ],
  health: [
    {
      required: true,
      message: "请选择宠物的健康状态",
      trigger: "change",
    },
  ],
  description: [
    { required: true, message: "请选择宠物的体型大小", trigger: "change" },
  ],
  isStray: [
    {
      required: true,
      message: "请选择宠物的流浪状态",
      trigger: "change",
    },
  ],
  vaccineStatus: [
    { required: true, message: "请选择宠物的疫苗接种情况", trigger: "change" },
  ],
});
const dialogVisible = ref(false);

const showDialog = () => {
  dialogVisible.value = true;
};
const emits = defineEmits(["getPetDataList"]);
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;

  if (!(Object.values(fileList.petFile).length > 0)) {
    ElMessage({
      message: "请选择宠物图片",
      type: "warning",
    });
    return;
  }

  await formEl.validate(async (valid) => {
    if (valid) {
      await uploadFile(fileList.petFile, uidName.petData.uuidName, 1).then(
        () => {
          fileList.petFile = {};
          form.petImage = uidName.petData.pictureRealPath.slice(
            0,
            uidName.petData.pictureRealPath.length - 1
          );
        }
      );
      if (Object.keys(fileList.yimiaoFile).length) {
        await uploadFile(
          fileList.yimiaoFile,
          uidName.yimiaoData.uuidName,
          1
        ).then(() => {
          form.vaccineImage = uidName.yimiaoData.pictureRealPath.slice(
            0,
            uidName.yimiaoData.pictureRealPath.length - 1
          );
        });
      }

      await addPetInfo(form).then((res: any) => {
        dialogVisible.value = false;
        ElMessage({
          message: res.message,
          type: "success",
        });
        resetForm(formRef.value);
        fileList.yimiaoFile = {};
        fileList.petFile = {};
        fileRef1.value.resetFile();
        fileRef2.value.resetFile();
        emits("getPetDataList");
      });
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  dialogVisible.value = false;
  formEl.resetFields();
};
defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.dialog-footer .el-button {
  margin-right: 10px;
  margin-top: -20px;
}

.customClass {
  .el-form-item {
    margin-bottom: 30px;
  }
  width: 80%;
}
</style>
